<template>
  <div class="tab">
    <div
      class="card"
      :class="{ active: active === item.pathUrl }"
      v-for="(item, index) in menuList"
      :key="item.title"
      @click="navJump(item, index)"
    >
      <img :src="item.icon" alt="" />
      <div class="Right">
        <div class="title">{{ item.title }}</div>
        <div class="textDemo">{{ item.contentText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Routes from "@/router/routes";
export default {
  data() {
    return {
      active: "/quiz/zswd",
      tabList: [
        {
          title: "知识问答",
          contentText: "提供通信领域等知识图谱，辅助您快速获取信息。",
          icon: require("../assets/Img/sider/WXIcon.png"),
          pathUrl: "/quiz/zswd",
        },
        {
          title: "应用助手",
          contentText:
            "给您提供业务办理与查询入口，便于您快速访问需要的应用与数据。",
          icon: require("../assets/Img/sider/ZsIcon.png"),
          pathUrl: "/quiz/yyzs",
        },
        {
          title: "智能问数",
          contentText: "提供通信领域等知识图谱，辅助您快速获取信息。",
          icon: require("../assets/Img/sider/WdIcon.png"),
          pathUrl: "/quiz/znws",
        },
        {
          title: "知识库搜索",
          contentText: "只需要关键语句，就可以搜索出知识库相关文档与知识内容。",
          icon: require("../assets/Img/sider/ZskIcon.png"),
          pathUrl: "/quiz/zskss",
        },
      ],
    };
  },
  created() {
    this.active = this.$router.currentRoute.fullPath;
  },
  computed: {
    menuList() {
      if (Routes.length > 0) {
        let temp = Routes[0].children[0].children;
        return this.tabList.map((item, index) => {
          return { ...item, pathUrl: temp[index].path };
        });
      } else return [];
    },
  },
  methods: {
    navJump(item, index) {
      if (item.pathUrl == this.active) return;
      this.active = item.pathUrl;
      this.$router
        .push({
          path: item.pathUrl,
        })
        .catch((error) => {
          console.log();
        });
    },
  },
};
</script>

<style scoped lang="less">
.tab {
  .card {
    height: 119px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-top: -5px;
      width: 47.22px;
      height: 44px;
    }
    .Right {
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      .title {
        font-family: PingFang SC;
        font-weight: 500;
        color: #434343;
        font-size: 22px;
      }
      .textDemo {
        width: 311px;
        font-family: PingFang SC;
        color: #8c8c8c;
        font-size: 14px;
        white-space: normal;
        text-align: start;
      }
    }
  }
  .active {
    background: linear-gradient(87.89deg, #f5f9ff 1.74%, #e8effe 99.49%);
  }
}
</style>
